<!DOCTYPE html>
<!-- saved from url=(0041)http://v3.bootcss.com/examples/dashboard/ -->
<html lang="zh-CN"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="http://v3.bootcss.com/favicon.ico">

    <title>Dashboard | HMC</title>

    <!-- Bootstrap core CSS -->
    <link href="./static/css/bootstrap.min.css" rel="stylesheet">


    <!-- Custom styles for this template -->
    <link href="./static/css/dashboard.css" rel="stylesheet">
    <link href="http://v3.bootcss.com/examples/navbar-fixed-top/navbar-fixed-top.css" rel="stylesheet">

    <!-- Just for debugging purposes. Don't actually copy these 2 lines! -->
    <!--[if lt IE 9]><script src="../../assets/js/ie8-responsive-file-warning.js"></script><![endif]-->
    <script src="./static/js/ie-emulation-modes-warning.js"></script>

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
      <script src="//cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="//cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->


    <!-- Highchart JS -->
    <style type="text/css">${demo.css}</style>
    <SCRIPT type=text/javascript src="./static/js/jquery-1.8.3.min.js"></SCRIPT>
    <SCRIPT type=text/javascript>
$(function () {
    avail_host_num = 0
    {% for h in hosts %}
    {% if h.visible == True %}
    avail_host_num += 1
    {%endif%}
    {%endfor%}
    $('#container1').highcharts({
        chart: {
            plotBackgroundColor: null,
            plotBorderWidth: null,
            plotShadow: false,
            type: 'pie'
        },
        title: {
           text: 'Hosts'
        },
        tooltip: {
            pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
        },
        plotOptions: {
            pie: {
                allowPointSelect: true,
                cursor: 'pointer',
                dataLabels: {
                    enabled: true,
                    format: '<b>{point.name}</b>: {point.percentage:.1f} %',
                    style: {
                        color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
                    }
                }
            }
        },
        series: [{
            name: 'Brands',
            colorByPoint: true,
            data: [{
                name: 'Managed',
                y: avail_host_num/{{ hosts.count }}
            }, {
                name: 'Not being managed',
                y: ({{ hosts.count }} - avail_host_num)/{{ hosts.count }},
                sliced: true,
                selected: true
            }]
        }]
    });
});
</script>

<SCRIPT type=text/javascript>

$(function () {
    superuser_num = 0
    operator_num = 0
    {% for u in auth_users %}
    {% if u.is_staff == False %}
    operator_num += 1
    {%endif%}
    {% if u.is_superuser == True %}
    superuser_num += 1
    {%endif%}
    {%endfor%}

    $('#container2').highcharts({
        chart: {
            plotBackgroundColor: null,
            plotBorderWidth: null,
            plotShadow: false,
            type: 'pie'
        },
        title: {
            text: 'Users'
        },
        tooltip: {
            pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
        },
        plotOptions: {
            pie: {
                allowPointSelect: true,
                cursor: 'pointer',
                dataLabels: {
                    enabled: true,
                    format: '<b>{point.name}</b>: {point.percentage:.1f} %',
                    style: {
                        color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
                    }
                }
            }
        },
        series: [{
            name: 'Brands',
            colorByPoint: true,
            data: [{
                name: 'Operator',
                y: operator_num
            }, {
                name: 'Host Operator',
                y: {{ auth_users.count }} - superuser_num - superuser_num,
                sliced: true,
                selected: true
            }, {
                name: 'Admin',
                y: superuser_num
            }]
        }]
    });
});
		</script>

    <script type="text/javascript" class="init">
$(document).ready(function() {
	$('#example').DataTable( {
		"order": [[ 3, "desc" ]]
	} );
} );
    </script>
    <link rel="stylesheet" type="text/css" href="./static/css/jquery.dataTables.min.css">
    <script type="text/javascript" language="javascript" src="./static/js/jquery-1.12.3.js">
	</script>
	<script type="text/javascript" language="javascript" src="./static/js/jquery.dataTables.min.js">
	</script>

  </head>

  <body>

    <nav class="navbar navbar-inverse navbar-fixed-top">
      <div class="container-fluid">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand">Project name HMC</a>
        </div>
        <div id="navbar" class="navbar-collapse collapse">
          <ul class="nav navbar-nav navbar-right">
            <li><a href="/admin/">Admin Panel</a></li>
            <li>
                {% if login_user.is_authenticated %}
								<a>{{ login_user}} </a>
							    {%else%}
								<a href="/login/">Login <span><span class="hidden-desktop"></span>Login</span></a>
							    {%endif%}
                <!--<a href="http://v3.bootcss.com/examples/dashboard/#">Profile</a>-->
            </li>
            <li><a href="#">About Us</a></li>

          </ul>
          <form class="navbar-form navbar-right">
            <input type="text" class="form-control" placeholder="Search...">
          </form>
        </div>
      </div>
    </nav>

    <div class="container-fluid">
      <div class="row">
        <div class="col-sm-3 col-md-2 sidebar">
          <ul class="nav nav-sidebar">
            <li class="active"><a href="http://v3.bootcss.com/examples/dashboard/#">Overview   <span class="sr-only">(current)</span> <span class="badge">{{ hosts.count }}</span></a></li>
            <li><a href="http://v3.bootcss.com/examples/dashboard/#">Reports   <span class="badge">   18</span></a></li>
            <li><a href="/login/">Exit</a></li>
          </ul>
        </div>
        <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
          <h1 class="page-header">Dashboard</h1>

          <div class="row placeholders">
            <div class="col-xs-6 col-sm-6 placeholder">
               <!-- Begin Highchart -->
               <SCRIPT src="../static/js/highcharts.js"></SCRIPT>
               <SCRIPT src="../static/js/exporting.js"></SCRIPT>
               <div id="container1" style="min-width: 300px; height: 300px; max-width: 600px; margin: 0 auto"></div>
               <!-- End Highchart -->
                <!--<img data-src="holder.js/200x200/auto/sky" class="img-responsive" alt="Generic placeholder thumbnail">-->
              <h4>Hosts</h4>
              <span class="text-muted"><span class="badge">{{ hosts.count }}</span></span>
            </div>
            <div class="col-xs-6 col-sm-6 placeholder">
                <!-- Begin Highchart -->
              <div id="container2" style="min-width: 300px; height: 300px; max-width: 600px; margin: 0 auto"></div>
                <!-- End Highchart -->

              <!--<img data-src="holder.js/200x200/auto/vine" class="img-responsive" alt="Generic placeholder thumbnail">-->
              <h4>Users</h4>
              <span class="text-muted"><span class="badge">{{ users.count }}</span></span>
            </div>
          </div>
        </div>

      </div>
    </div>

    <div class="container-fluid">
		<div class="row">
			<div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
				<h2 class="page_title">HMC Table</h2>
				<table id="example" class="display" cellspacing="0" width="100%">
					<thead>
						<tr>
							<th>Id</th>
							<th>Ip</th>
							<th>Name</th>
							<th>Location</th>
                            <th>Version</th>
							<th>Supervisor</th>
                            <th>Create Date</th>
							<th>Update Ddate</th>
                            <th>Managed</th>
                            <th>Action</th>
                            <th>Refresh</th>
						</tr>
					</thead>
					<tfoot>
						<tr>
                            <th>Id</th>
							<th>Ip</th>
							<th>Name</th>
							<th>Location</th>
                            <th>Version</th>
							<th>Supervisor</th>
                            <th>Create Date</th>
							<th>Update Ddate</th>
                            <th>Managed</th>
                            <th>Action</th>
                            <th>Refresh</th>
						</tr>
					</tfoot>
					<tbody>
					{% for h in hosts %}
					<tr>
                            <td>{{ h.id }}</td>
							<td>{{ h.ip }}</td>
							<td>{{ h.name }}</td>
							<td>{{ h.location }}</td>
                            <td>{{ h.version }}</td>
							<td>{{ h.supervisor }}</td>
                            <td>{{ h.create_at }}</td>
                            <td>{{ h.update_at }}</td>
                            {% if h.visible == True %}<td align="center"><a><span class="label label-success">True</span></a></td>
                            {% else %}<td align="center"><a href="#"><span class="label label-danger">False</span></a></td>
                            {% endif %}

							<td>
                                <form action="." method="get">
                                    {% if a.hid == '' %}<input type="submit" name="id{{h.id}}" value=collect_log>
                                    {% elif a.hid == h.id %}
                                                            {% if h.id == a.hid %}<div id="content"></div>
                                                            {% else %}<input type="submit" name="id{{h.id}}" value=collect_log>
                                                            {% endif %}

                                    {% else %}<input type="submit" name="id{{h.id}}" value=collect_log>
                                    {% endif %}
                                </form>
                            </td>



                            <td><button type="button" class="btn btn-default btn-sm"><span class="glyphicon glyphicon-refresh"></span> Refresh</button></td>
					</tr>
					{% endfor %}

					</tbody>
				</table>

   <script type="text/javascript" language="javascript">
   		function update(id) {
   			$.getJSON("/data/" + id + "/",function(data) {
            	$.each(data, function(){
            		$("#content").html(
            		'<table id="example" class="display" cellspacing="0" width="100%"><thead><tr><th>' + this.name + '</th><th>' +this.subject + '</th><th>' + this.age + '</th></tr></thead></table>');
            	});
   			});
   		}
   		function timeDown(limit, i) {
   			limit--;
   			if (i > 4) {
   				i = 0;
   			}
   			if (limit < 0) {
   				limit = 3;
   				update(i);
   				i++;
   			}
   			$('#time').text(limit + '秒后刷新');
   			setTimeout(function() {
   			    timeDown(limit, i);
   		    }, 1000)
   		}

   		$(document).ready(function() {
   			update(0)
        })
    </script>
    <p id="time"></p>
    <div id="content"></div>
			</div>
		</div>
	</div>

    <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <!--<script src="./static/js/jquery.min.js"></script>
    <script src="./static/js/bootstrap.min.js"></script>
    <!-- Just to make our placeholder images work. Don't actually copy the next line! -->
    <script src="./static/js//holder.min.js"></script>
    <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
    <script src="./static/js/ie10-viewport-bug-workaround.js"></script>

</body></html>